<template>
  <div id="app">
    <el-switch></el-switch>
    <el-switch></el-switch>
    <el-switch></el-switch>
    <br />
    <br />
    <!-- 绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色 -->
    <el-switch v-model="tableData[0].value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    <el-switch v-model="tableData[1].value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    <el-switch v-model="tableData[2].value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    <br>
    <br>
    <el-switch :key="item.id" v-for="(item) in tableData" v-model="item.value" :active-value="true" :inactive-value="false"
    @change="handleChange">
    </el-switch>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      tableData:[
        {
          id:1,
          title:"home",
          value:true
        },
        {
          id:2,
          title:"product",
          value:true
        },
        {
          id:3,
          title:"introduce",
          value:true
        }
      ]
    };
  },
  methods: {
    handleChange:function(value){
      console.log(value);
    }
  },
};
</script>

<style lang="less" scoped>
</style>
